<template>
  <div class="container">
    <div class="dashboard-text">
      <div class="dashboard-hearder">
        <div>
          <p class="hour">12小时</p>
          <p>学习时长</p>
        </div>
        <img src="../icon_kai09n62lta/drxx18.svg" alt="" class="imgs">
      </div>
      <div class="dashboard-hearder">
        <div>
          <p class="hour">12小时</p>
          <p>游戏时长</p>
        </div>
        <img src="../icon_kai09n62lta/youxiji.svg" alt="" class="imgs">
      </div>
      <div class="dashboard-hearder">
        <div>
          <p class="hour">12小时</p>
          <p>旅游时长</p>
        </div>
        <img src="../icon_kai09n62lta/tubiaozhizuomoban_shatan.svg" alt="" class="imgs">
      </div>
      <div class="dashboard-hearder">
        <div>
          <p class="hour">12小时</p>
          <p>社交时长</p>
        </div>
        <img src="../icon_kai09n62lta/社交APP.svg" alt="" class="imgs">
      </div>
    </div>
    <div class="dashboard-middle">
      <div class="hello">
        <div ref="chart" class="chart" />
      </div>
      <div class="pack">
        <div ref="pillar" class="pillar" />
      </div>
    </div>
    <div class="dashboard-fotter">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="newdata" label="日期">
        </el-table-column>
        <el-table-column prop="learntime" label="学习时长">
          <template slot-scope="scope">
            <div>{{scope.row.learntime}}小时</div>
          </template>
        </el-table-column>
        <el-table-column prop="gametime" label="游戏时长">
          <template slot-scope="scope">
            <div>{{scope.row.gametime}}小时</div>
          </template>
        </el-table-column>
        <el-table-column prop="traveltime" label="旅游时长">
          <template slot-scope="scope">
            <div>{{scope.row.traveltime}}小时</div>
          </template>
        </el-table-column>
        <el-table-column prop="socialtime" label="社交时长">
          <template slot-scope="scope">
            <div>{{scope.row.socialtime}}小时</div>
          </template>
        </el-table-column>
        <el-table-column prop="resttime" label="休息时长">
          <template slot-scope="scope">
            <div>{{scope.row.resttime}}小时</div>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="add(scope.row)">新增</el-button>
            <el-button type="danger" size="small" @click="dedel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="新增" :visible.sync="dialogVisible" width="45%">
      <el-form :model="dateForm" label-position="left" :rules="rules" ref="dateForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="日期" prop="newdata">
          <el-date-picker v-model="dateForm.newdata" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="学习时间" prop="learntime">
          <el-time-picker is-range v-model="dateForm.learntime" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="游戏时间" prop="gametime">
          <el-time-picker is-range v-model="dateForm.gametime" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="旅游时间" prop="traveltime">
          <el-time-picker is-range v-model="dateForm.traveltime" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="社交时间" prop="socialtime">
          <el-time-picker is-range v-model="dateForm.socialtime" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="休息时间" prop="resttime">
          <el-time-picker is-range v-model="dateForm.resttime" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
          </el-time-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="agree('dateForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import bendi from '../../store/bendi'
import * as echarts from 'echarts';
import moment from 'moment'
export default {
  name: 'Dashboard',
  data () {
    return {
      chart: null,
      pillar: null,
      dateForm: {
        newdata: '',
        learntime: '',
        gametime: '',
        traveltime: '',
        socialtime: '',
        resttime: ''
      },
      tableData: [
        {
          newdata: '2016-05-02',
          learntime: '2.00',
          gametime: '2.00',
          traveltime: '2.00',
          socialtime: '2.00',
          resttime: '2.00'
        }
      ],
      rules: {
        newdata: [
          { required: true, message: '请选择日期', trigger: 'blur' }
        ],
        learntime: [
          { required: true, message: '请选择学习时间', trigger: 'change' }
        ],
        gametime: [
          { required: true, message: '请选择游戏时间', trigger: 'change' }
        ],
        traveltime: [
          { required: true, message: '请选择旅游时间', trigger: 'change' }
        ],
        socialtime: [
          { required: true, message: '请选择社交时间', trigger: 'change' }
        ],
        resttime: [
          { required: true, message: '请选择休息时间', trigger: 'change' }
        ],
      },
      dialogVisible: false
    }
  },
  mounted () {
    this.init()
    this.inited()
  },
  methods: {
    init () {
      // 2.初始化
      this.chart = this.$Echarts.init(this.$refs.chart)
      // 3.配置数据
      const option = {
        // 表头
        title: {
          text: '任务时长',
          left: '2%'
        },
        //标点
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        // 样式
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,//铺平
          data: ['学习时长', '游戏时长', '旅游时长', '社交时长', '休息时长']
        }, // X轴
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} %'
          }
        }, // Y轴
        series: [
          {
            name: 'Line 1',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(108, 139, 255)'
                },
                {
                  offset: 1,
                  color: 'rgb(1, 191, 236)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [10, 30, 20, 35, 27],
          }
        ], // 配置项
      }
      // 4.传入数据
      this.chart.setOption(option)
    },
    inited () {
      // 2.初始化
      this.pillar = this.$Echarts.init(this.$refs.pillar)
      // 3.配置数据
      const option = {
        title: {
          text: '数据处理中心',
          left: '5%'
        },
        legend: {
          left: 'center',
          bottom: '5%'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true }
          }
        },
        series: [{
          name: 'Nightingale Chart',
          type: 'pie',
          radius: [20, 100],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 8
          },
          data: [
            { value: 40, name: '学习时长' },
            { value: 38, name: '游戏时长' },
            { value: 32, name: '旅游时长' },
            { value: 30, name: '社交时长' }
          ]
        }] // 配置项
      }
      // 4.传入数据
      this.pillar.setOption(option)
    },
    add (e) {
      console.log(e)
      this.dialogVisible = true
    },
    dedel (e) {
      console.log(e)
      this.tableData.splice(1)
    },
    agree (dateForm) {
      this.$refs[dateForm].validate((valid) => {
        if (valid) {
          let arr = {
            newdata: this.dateForm.newdata,
            learntime: (((new Date(this.dateForm.learntime[1])).getTime() - (new Date(this.dateForm.learntime[0])).getTime()) / 1000 / 3600).toFixed(2),
            gametime: (((new Date(this.dateForm.gametime[1])).getTime() - (new Date(this.dateForm.gametime[0])).getTime()) / 1000 / 3600).toFixed(2),
            traveltime: (((new Date(this.dateForm.traveltime[1])).getTime() - (new Date(this.dateForm.traveltime[0])).getTime()) / 1000 / 3600).toFixed(2),
            socialtime: (((new Date(this.dateForm.socialtime[1])).getTime() - (new Date(this.dateForm.socialtime[0])).getTime()) / 1000 / 3600).toFixed(2),
            resttime: (((new Date(this.dateForm.resttime[1])).getTime() - (new Date(this.dateForm.resttime[0])).getTime()) / 1000 / 3600).toFixed(2)
          }
          localStorage.setItem('arr', JSON.stringify(arr));//存
          // JSON.parse(localStorage.getItem('arr'));//取
          this.tableData.push(JSON.parse(localStorage.getItem('arr')))
          console.log(arr)
          this.dialogVisible = false
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style lang="scss" scoped>
.container {
  margin: 10px;
  height: 100%;
}
.dashboard {
  &-middle {
    height: 100%;
    display: flex;
  }
  &-text {
    font-size: 16px;
    display: flex;
    justify-content: space-around;
  }
  &-hearder {
    width: 400px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-right: 10px;
    background-color: #fff;
  }
  &-fotter {
    margin-top: 10px;
  }
}
.hello {
  // height: 100%;
  width: 60%;
  margin-top: 10px;
  margin-right: 10px;
  padding-top: 10px;
  background-color: #fff;
}
.chart {
  width: 100%;
  height: 370px;
}
.pack {
  height: 100%;
  width: 38%;
  margin-top: 10px;
  padding-top: 10px;
  background-color: #fff;
}
.pillar {
  width: 100%;
  height: 370px;
}
.imgs {
  width: 50px;
  height: 50px;
}
.hour {
  color: #409eff;
}
</style>
